<template>
    <div class="user-profile-container">
        <div class="profile-card">
            <div class="profile-header">
                <el-avatar :size="80" :src="avatarUrl" />
                <div class="profile-info">
                    <h2>{{ userInfo.Name || '用户' }}</h2>
                    <p>ID: {{ userInfo.Id || '-' }}</p>
                </div>
            </div>
            <div class="profile-section">
                <h3>角色信息</h3>
                <el-tag v-for="role in RoleName" type="success" class="role-tag">{{ role }}</el-tag>
            </div>
            <div class="profile-section">
                <h3>权限信息</h3>
                <el-tag v-for="perm in permissions" :key="perm.id" type="info" class="perm-tag">{{ perm.permissionName
                    }}</el-tag>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { axiosr } from '@/http/axiosRead'

const userInfo = ref({ Name: localStorage.getItem("name"), Id: localStorage.getItem("Uid") })
const permissions = ref<any[]>([])
const avatarUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')

const permission = localStorage.getItem("RoleId");
const RoleName = localStorage.getItem("RoleName")?.split(',');

onMounted(() => {
    permis()
})

const permis = () => {
    axiosr.post('/api/Permission/GetPermissionsByRoleIds', { roleIds: permission }).then((res) => {
        permissions.value = res.data.data
        console.log(res.data.data);
    })
}
</script>

<style scoped>
.user-profile-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 80vh;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 40px 0;
}

.profile-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(30, 41, 59, 0.10);
    padding: 40px 48px 32px 48px;
    min-width: 420px;
    max-width: 96vw;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.profile-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: #334155;
}

.profile-info p {
    margin: 0;
    color: #64748b;
}

.profile-section {
    margin-top: 1.5rem;
}

.role-tag,
.perm-tag {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
</style>